<template>
	<div class="margin_top widthText word_wrap radius ffffff paddingtb15" @click="goInfo(child.id)">
		<div class="paddinglr flexbetween">
			<div class="flexleft">
				<div class="positionr margin_right1">
					<img class="userImg" :src="child.avatar" alt="">
					<div class="stateBox" v-if="child.status == 'normal'"></div>
					<div class="nostateBox" v-else></div>
					<!-- <div class="stateBox"></div> -->
				</div>
				<div>
					<div class="text_ft color_zero">{{child.username}}</div>
					<div class="text_b color_nine margin_top2">{{child.description}}</div>
				</div>
			</div>
			<div>
				<div class="color_red">
					<span class="text_f">￥{{child.price}}</span>
					<span class="text_b">/次</span>
				</div>
				<div class="themeBtnBg margin_top1" @click.stop="goQuestion(child.id)">立即提问</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			child: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			goInfo(id) { //老师主页
				this.$router.push({
					path: "/teacher/teacherInfo",
					query: {
						id
					}
				})
			},
			goQuestion(id) { //立即提问
				this.$router.push({
					path: "/questioning/appointTeacher",
					query: {
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userImg {
		width: 60px;
		min-width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	/* .stateBox {
		width: 16px;
		height: 16px;
		background: #00E3BA;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		position: absolute;
		right: 10px;
		bottom: 10px;
	} */

	.widthText {
		width: 580px;
	}

	.paddinglr {
		padding: 0 20px;
	}
</style>